<%--
    Document   : student
    Author     : Jalbs
--%>

<code>
       <style type="text/css" title="currentStyle">
           @import "../css/ui-lightness/jquery-ui-1.7.2.custom.css";
           @import "../css/table/css/demo_table_jui.css";
           @import "../css/jquery.alerts.css";         
        </style>
        <script type="text/javascript" language="javascript" src="../js/jquery-1.3.2.js"></script>
        <script type="text/javascript" language="javascript" src="../js/jquery.dataTables.js"></script>
        <script type="text/javascript" language="javascript" src="../js/jquery-ui-1.7.2.custom.min.js"></script>
        <script src="../js/jquery.alerts.js" type="text/javascript"></script>

        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                         var action;
                         var asInitVals = new Array();


                          $("#formDialog").dialog({
                            bgiframe: true,
                            autoOpen: false,
                            width:630,
                            height: 550,
                            modal: true,
                            buttons: {
                                    'Aceptar': function() {
                                       $("#studentKey").removeAttr("disabled");
                                       var valuesStudent=$("#modifyStudentForm").serialize();
                                       if(action=="m"){

                                            $.post("modifyStudent.do", valuesStudent, function(response){
                                                if(response=="success"){
                                                    var studentKey=$("#studentKey").val();
                                                    $("#id_"+studentKey).html($("#studentKey").val());
                                                    $("#name_"+studentKey).html($("#name").val());
                                                    $("#firstLastName_"+studentKey).html($("#firstLastName").val());
                                                    $("#secondLastName_"+studentKey).html($("#secondLastName").val());
                                                    $("#phone_"+studentKey).html($("#phone").val());
                                                    $("#email_"+studentKey).html($("#email").val());
                                                    $("#state_"+studentKey).html($("#state").val());
                                                    
                                                    jAlert("Se modifico el alumno exitosamente", "Alumno")
                                                }else   jAlert(response, "Error");
                                            }, "html");
                                        }else if(action=="a"){
                                               $.post("addStudent.do", valuesStudent, function(response){
                                                    if(response=="success"){                                                     
                                                    jAlert("Se agrego un(a) alumno(a) exitosamente", "Alumno");
                                                    setTimeout("window.location.reload()", 2000);

                                                    }else   jAlert(response, "Error");
                                                }, "html");

                                        }

                                        $(this).dialog('close');
                                    },
                                    Cancel: function() {
                                            $(this).dialog('close');
                                    }
                            }
                        });

                        $("a[href=#modify]").click(function(){
                            var id_student=$(this).attr("id");
                            action="m";
                             $.post("getStudentToModify.do",{id:id_student},function(page){
                                $('#formDialog').html(page);
                                $('#formDialog').dialog('open');
                            }, "html");
                        });

                        $("a[href=#info]").click(function(){
                            var id_student=$(this).attr("id");
                            action="i";
                             $.post("getStudentInfo.do",{id:id_student},function(page){
                                $('#formDialog').html(page);
                                $('#formDialog').dialog('open');
                            }, "html");
                        });

                        $("a[href=#new]").click(function(){
                         action="a";
                          $.post("newStudent.do",function(page){
                            $('#formDialog').html(page);
                            $('#formDialog').dialog('open');
                        }, "html");
                        });

                         oTable = $('#studentList').dataTable({
					"bJQueryUI": true,
					"sPaginationType": "full_numbers",
                                        "aoColumns": [
                                            null,
                                            null,
                                            null,
                                            null,
                                            null,
                                            null,
                                            null,
                                           { "bSortable": false },

                                        ]
				});
                                
                        $("tfoot input").keyup( function () {
                                oTable.fnFilter( this.value, $("tfoot input").index(this) );
                        } );

                        $("tfoot input").each( function (i) {
                                asInitVals[i] = this.value;
                        } );

                        $("tfoot input").focus( function () {
                                if ( this.className == "search_init" )
                                {
                                        this.className = "";
                                        this.value = "";
                                }
                        } );

                        $("tfoot input").blur( function (i) {
                                if ( this.value == "" )
                                {
                                        this.className = "search_init";
                                        this.value = asInitVals[$("tfoot input").index(this)];
                                }
                        } );

		} );



		</script>

</code>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>

<logic:present name="studentList">

<bean:size id="size" name="studentList"/>
<logic:greaterThan name="size" value="0">

<div class="demo_jui">
    <html:link href="#new">Nuevo Alumno </html:link>
    <table width="800px" cellpadding="0" cellspacing="0" border="0" class="display" id="studentList">
        <thead>
            <tr >
                <th>Clave Alumno</th>
                <th>Nombre</th>
                <th>Apellido Paterno</th>
                <th>Apellido Materno</th>                
                <th>Telefono</th>
                <th>Correo elec.</th>
                <th>Estado</th>
                <th colspan="2">Operacion</th>
            </tr>
        </thead>
        <tbody id="tableBody">
            <logic:iterate id="result" name="studentList">
                <tr id="row_${result.studentKey}">
                    <td id="id_${result.studentKey}"><bean:write name="result" property="studentKey" /></td>
                    <td id="name_${result.studentKey}"><bean:write name="result" property="name" /></td>
                    <td id="firstLastName_${result.studentKey}"><bean:write name="result" property="firstLastName" /></td>
                    <td id="secondLastName_${result.studentKey}"><bean:write name="result" property="secondLastName" /></td>                    
                    <td id="phone_${result.studentKey}"><bean:write name="result" property="phone" /></td>                    
                    <td id="email_${result.studentKey}"><bean:write name="result" property="email" /></td>
                    <td id="state_${result.studentKey}"><bean:write name="result" property="state" /></td>
                    
                    <td><center><html:link href="#modify" styleId="${result.studentKey}" ><bean:message key="label.button.modify"/></html:link></center></td>
                    <td><center><html:link href="#info" styleId="${result.studentKey}" >Detalles</html:link></center></td>
                </tr>
            </logic:iterate>
        </tbody>
        <tfoot>
            <tr>
                <th>Clave Alumno</th>
                <th>Nombre</th>
                <th>Apellido Paterno</th>
                <th>Apellido Materno</th>
                <th>Telefono</th>
                <th>Correo elec.</th>
                <th>Estado</th>  
                <th colspan="2">Operacion</th>
            </tr>                
                <td><input type="text" name="search_np" value="Clave Alumno" class="search_init" /></td>
                <td><input type="text" name="search_np" value="Nombre" class="search_init" /></td>
                <td><input type="text" name="search_np" value="Apellido Paterno" class="search_init" /></td>
                <td><input type="text" name="search_np" value="Apellido Materno" class="search_init" /></td>
                <td><input type="text" name="search_np" value="Telefono" class="search_init" /></td>
                <td><input type="text" name="search_np" value="Correo elec." class="search_init" /></td>
                <td><input type="text" name="search_np" value="Estado" class="search_init" /></td>
                <td></td>
        </tfoot>
    </table>
</div>
</logic:greaterThan>
</logic:present>

<div id="formDialog">

</div>